<template>
<div>
  <slot name="anchor"></slot>
  <div class="dropdown-pane et-dropdown" :id="id" data-dropdown :style="styles">
    <slot name="contents"></slot>
  </div>
</div>
</template>

<script>
export default {

  props: {
    id: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: '9rem'
    },
    maxHeight: {
      type: String
    },
    position: {
      type: String,
      default: 'auto',
      validator(value) {
        return ['auto', 'left', 'right'].indexOf(value) !== -1;
      }
    },
    alignment: {
      type: String,
      default: 'auto',
      validator(value) {
        return ['auto', 'top', 'center', 'bottom'].indexOf(value) !== -1;
      }
    },
    closeOnClick: {
      type: Boolean,
      default: true
    },
    hover: {
      type: Boolean
    },
    hoverPane: {
      type: Boolean
    },
    vOffset: {
      type: Number,
      default: 0
    },
    hOffset: {
      type: Number,
      default: 0
    }
  },

  computed: {
    styles() {
      return {
        width: this.width,
        'max-height': this.maxHeight ? this.maxHeight : false,
        'overflow-y': this.maxHeight ? 'auto' : false
      };
    }
  },

  mounted() {
    new Foundation.Dropdown($(`#${this.id}`), {
      "hover": this.hover,
      "hoverPane": this.hoverPane,
      "closeOnClick": this.closeOnClick,
      "position": this.position,
      "alignment": this.alignment,
      "vOffset": this.vOffset,
      "hOffset": this.hOffset
    });
  }
};
</script>
